<template>
    <div class="h-full flex flex-col">
        <mrc_ess_Table @add="handleAdd" @view="handleView" @edit="handleEdit" name="questionBankCompetencyDataTable" :opt="props.formType == 'view' ? ['view'] : ['edit', 'del'] "
            :showAddBtn="props.formType == 'view' ? false : true" :showPagination="false" :items="items"
            :tableFields="tableFields">

        </mrc_ess_Table>

        <!-- 表单弹窗 -->
        <Teleport :to="innerDrawerTeleportRef">
            <competencyDialog ref="formDialogRef"></competencyDialog>
        </Teleport>

    </div>
</template>

<script lang="ts" setup>
import competencyDialog from './competencyDialog.vue';

import { ref, inject, toRaw } from 'vue';

const props = defineProps({
    formType: {
        type: String,
        default: "add"
    }
})

// 使用父组件传入的ref
const innerDrawerTeleportRef = inject("drawerTeleportRef", null);

const formDialogRef = ref<any>(null);

/**
 * 点击查看
 * @param obj 
 */
 function handleView(obj: any) {
    formDialogRef.value.open({
        formType: "view",
        ...obj
    });
}
/**
 * 点击编辑
 * @param obj 
 */
function handleEdit(obj: any) {
    formDialogRef.value.open({
        formType: "edit",
        ...obj
    });
}
/**
 * 点击添加
 */
function handleAdd() {
    formDialogRef.value.open({
        formType: "add"
    })
}

const tableFields = ref<any>([ { key: "name", i18n: "title_competency" }, { key: "opt", width: 64, align: "center" }])

const items = [
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    },
    {
        name: 'Name',
        weight: 1,
        num: "1",
        type: "Fixed"
    }
   
]
</script>

<style scoped></style>